<template>
	<view class="container">
		<!-- 顶部装饰 -->
		<view class="header-decoration">
			<image src="/static/friends-banner.png" mode="aspectFill" class="banner-image"></image>
		</view>

		<!-- 好友列表 -->
		<view class="card-section">
			<view class="section-header">
				<image src="/static/friend-icon.png" class="section-icon"></image>
				<text class="section-title">My Friends</text>
			</view>
			<view v-if="friendList.length === 0" class="empty-state">
				<image src="/static/empty-friends.png" class="empty-image"></image>
				<text class="empty-text">Let's make some friends!</text>
			</view>
			<view v-else class="friends-grid">
				<view v-for="friend in friendList" :key="friend.friendId" class="friend-card">
					<view class="friend-avatar-wrapper">
						<image :src="friend.avatar || '/static/default-avatar.png'" class="friend-avatar"></image>
					</view>
					<text class="friend-name">{{ friend.friendName }}</text>
					<button @click="removeFriend(friend.friendId)" class="delete-btn">
						<text class="delete-icon">×</text>
					</button>
				</view>
			</view>
		</view>

		<!-- 好友请求 -->
		<view class="card-section">
			<view class="section-header">
				<image src="/static/mail-icon.png" class="section-icon"></image>
				<text class="section-title">Friend Requests</text>
			</view>
			<view v-if="pendingRequests.length === 0" class="empty-state">
				<text class="empty-text">No new requests</text>
			</view>
			<view v-else class="request-list">
				<view v-for="request in pendingRequests" :key="request.friendId" class="request-card">
					<image :src="request.avatar || '/static/default-avatar.png'" class="request-avatar"></image>
					<text class="request-name">{{ request.friendName }}</text>
					<view class="request-buttons">
						<button @click="acceptFriend(request.friendId)" class="accept-btn">Accept</button>
						<button @click="rejectFriend(request.friendId)" class="reject-btn">Reject</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 添加好友 -->
		<view class="card-section">
			<view class="section-header">
				<image src="/static/search-icon.png" class="section-icon"></image>
				<text class="section-title">Find New Friends</text>
			</view>
			<view class="search-box">
				<input 
					v-model="searchUserName" 
					placeholder="Enter friend's name" 
					class="search-input"
				/>
				<button @click="searchUser" class="search-btn">Search</button>
			</view>
			<view v-if="searchResult.length > 0" class="search-results">
				<view v-for="user in searchResult" :key="user.userId" class="result-card">
					<image :src="user.avatar || '/static/default-avatar.png'" class="result-avatar"></image>
					<text class="result-name">{{ user.username }}</text>
					<button @click="sendFriendRequest(user.userId)" class="add-btn">Add Friend</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			friendList: [], // 好友列表
			pendingRequests: [], // 待处理的好友请求
			searchUserName: '', // 搜索用户名
			searchResult: [], // 搜索结果
			userId: 1 // 当前用户ID（实际项目中从 Vuex 或缓存获取）
		};
	},
	onLoad() {
		this.loadFriendList();
	},
	methods: {
		// 加载好友列表
		loadFriendList() {
			uni.request({
				url: `http://localhost:80/api/friend/${this.userId}`,
				method: 'GET',
				success: (res) => {
					this.friendList = res.data.friends;
					this.pendingRequests = res.data.pendingRequests;
				}
			});
		},

		// 发送好友请求
		sendFriendRequest(friendId) {
			uni.request({
				url: `http://localhost:80/api/friend/add`,
				method: 'POST',
				data: {
					userId: this.userId,
					friendId: friendId
				},
				success: (res) => {
					if (res.data.code === 200) {
						uni.showToast({ title: '好友请求已发送', icon: 'success' });
					} else {
						uni.showToast({ title: '请求失败', icon: 'none' });
					}
				}
			});
		},

		// 接受好友请求
		acceptFriend(friendId) {
			uni.request({
				url: `http://localhost:80/api/friend/accept`,
				method: 'POST',
				data: {
					userId: this.userId,
					friendId: friendId
				},
				success: (res) => {
					if (res.data.code === 200) {
						uni.showToast({ title: '已接受好友请求', icon: 'success' });
						this.loadFriendList();
					}
				}
			});
		},

		// 拒绝好友请求
		rejectFriend(friendId) {
			uni.request({
				url: `http://localhost:80/api/friend/reject`,
				method: 'POST',
				data: {
					userId: this.userId,
					friendId: friendId
				},
				success: (res) => {
					if (res.data.code === 200) {
						uni.showToast({ title: '已拒绝好友请求', icon: 'success' });
						this.loadFriendList();
					}
				}
			});
		},

		// 删除好友
		removeFriend(friendId) {
			uni.request({
				url: `http://localhost:80/api/friend/delete`,
				method: 'POST',
				data: {
					userId: this.userId,
					friendId: friendId
				},
				success: (res) => {
					if (res.data.code === 200) {
						uni.showToast({ title: '好友已删除', icon: 'success' });
						this.loadFriendList();
					}
				}
			});
		},

		// 搜索用户
		searchUser() {
			uni.request({
				url: `http://localhost:80/api/user/search`,
				method: 'GET',
				data: {
					username: this.searchUserName
				},
				success: (res) => {
					this.searchResult = res.data.users;
				}
			});
		}
	}
};
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #f0f7ff;
	padding-bottom: 30rpx;
}

.header-decoration {
	height: 200rpx;
	overflow: hidden;
	border-bottom-left-radius: 30rpx;
	border-bottom-right-radius: 30rpx;
}

.banner-image {
	width: 100%;
	height: 100%;
}

.card-section {
	margin: 30rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.section-header {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.section-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 10rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

/* 好友网格样式 */
.friends-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
}

.friend-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx;
	background: #f8f9fa;
	border-radius: 15rpx;
}

.friend-avatar-wrapper {
	position: relative;
	width: 120rpx;
	height: 120rpx;
	margin-bottom: 10rpx;
}

.friend-avatar {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 4rpx solid #fff;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.friend-name {
	font-size: 26rpx;
	color: #333;
	text-align: center;
}

/* 按钮样式 */
.delete-btn {
	position: absolute;
	top: -10rpx;
	right: -10rpx;
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	background: #ff6b6b;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.delete-icon {
	color: white;
	font-size: 24rpx;
}

/* 搜索框样式 */
.search-box {
	display: flex;
	gap: 20rpx;
	margin-bottom: 20rpx;
}

.search-input {
	flex: 1;
	height: 80rpx;
	background: #f8f9fa;
	border-radius: 40rpx;
	padding: 0 30rpx;
	font-size: 28rpx;
}

.search-btn {
	width: 160rpx;
	height: 80rpx;
	background: #4CAF50;
	color: white;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
}

/* 请求卡片样式 */
.request-card {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background: #f8f9fa;
	border-radius: 15rpx;
	margin-bottom: 20rpx;
}

.request-avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}

.request-buttons {
	display: flex;
	gap: 10rpx;
}

.accept-btn {
	background: #4CAF50;
	color: white;
	padding: 10rpx 30rpx;
	border-radius: 30rpx;
	font-size: 24rpx;
}

.reject-btn {
	background: #ff6b6b;
	color: white;
	padding: 10rpx 30rpx;
	border-radius: 30rpx;
	font-size: 24rpx;
}

/* 空状态样式 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40rpx;
}

.empty-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	color: #999;
	font-size: 28rpx;
}
</style>
